﻿/* 被拖动的源对象可以触发的事件：
  *(1)ondragstart：源对象开始被拖动
   (2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
   (3)ondragend：源对象被拖动结束

     拖动源对象可以进入到上方的目标对象可以触发的事件：
   (1)ondragenter：目标对象被源对象拖动着进入
  *(2)ondragover：目标对象被源对象拖动着悬停在上方
   (3)ondragleave：源对象拖动着离开了目标对象
  *(4)ondrop：源对象拖动着在目标对象上方释放/松手
 */
//全局函数
function $$(id){
	return document.getElementById(id);
}

//事件监听
window.addEventListener('load',init,false);

function init(){
	//取得图片
	var imgNode=document.getElementById('img1');
	
	//取得目标区域
	var targetNode=document.getElementById('targetDiv');
	
	//调用下面的方法
	imgNode.addEventListener('dragstart',dragstartMethod,false);
	imgNode.addEventListener('drag',dragMethod,false);
	imgNode.addEventListener('dragend',dragendMethod,false);
	
	targetNode.addEventListener('dragenter',dragenterMethod,false);
	targetNode.addEventListener('dragover',dragoverMethod,false);
	targetNode.addEventListener('dragleave',dragleaveMethod,false);
	targetNode.addEventListener('drop',dropMethod,false);
}


//拖拽开始
function dragstartMethod(e){
	/* e:事件对象
	  * 事件对象是客观存在的。可以通过事件对象获取到事件发生的主体，事件类型等信息
	  * e.target:触发此事件的元素（事件的目标节点）。
	  * e.type:事件的名称
	  */
	
	//获得被拖放的图片id
	var dragImgId=e.target.id;
	// console.log('e.target（事件发生的元素）:'+e.target)
	// console.log('e.type（事件类型）:'+e.type)
	
	//获得被拖放的图片地址
	var dragImgSrc=$$(dragImgId).src;
	// console.log('dragImgSrc:'+dragImgSrc)
	
	//利用dataTransfer传递数据
	/* 所有的拖放事件中都提供了一个数据传输对象dataTransfer，
	  *  主要是用于在源对象和目标对象之间传递数据
	  * setData(name, data)
	  * getData(name)
	  */
	e.dataTransfer.setData("text",dragImgSrc);
	
	$$('dragstart').innerHTML='ondragstart:拖拽开始AAA'
}


function dragMethod(e){
	var x=e.pagex;
	var y=e.pagey;
	
	$$('drag').innerHTML='ondrag：拖拽过程中x:'+x+',y:'+y;
}

function dragendMethod(){  
    $$('dragend').innerHTML='ondragend：源对象拖拽结束';
}

//---------------------------------------------------

function dragenterMethod(){
	$$('dragenter').innerHTML='ondragenter:源对象进入了目标区域---';	
}

function dragoverMethod(e){
	//*阻止浏览器页面动向默认操作
	e.preventDefault();
	
	var x=e.pageX;
	var y=e.pageY;
	$$('dragover').innerHTML='ondragover：源对象在目标区域里 x:'+x+',y:'+y;
	
}

function dragleaveMethod(){  
    $$('dragleave').innerHTML='ondragleave：源对象离开了目标区域---';
}

function dropMethod(e){
	 //创建图片对象
	 var imgNode=new Image();
	 
	 //取得图片的路径
	 var imgSrc = e.dataTransfer.getData('text');
	 imgNode.src=imgSrc;
	 
	 //*添加图片节点
	 $$('targetDiv').appendChild(imgNode);
	 
	    $$('drop').innerHTML='ondrop：源对象投放到了目标区域';
	}


















